<template>
    <scroll-view scroll-y @scrolltolower="onScrolltolower" class="scroll-view">
      <!-- 已登录: 显示购物车 -->
      <template v-if="memberStore.profile?.token">
        <!-- 购物车列表 -->
        <view class="cart-list" v-if="true">
          <!-- 优惠提示 -->
          <view class="tips">
            <text class="label">满减</text>
            <text class="desc">满1件, 即可享受9折优惠</text>
          </view>
          <!-- 滑动操作分区 -->
          <uni-swipe-action>
            <!-- 滑动操作项 -->
            <uni-swipe-action-item v-for="item,index in cartList" :key="index" class="cart-swipe">
              <!-- 商品信息 -->
              <view class="goods">
                <!-- 选中状态 -->
                <text class="checkbox" :class="item.selected == true?'checked':''" @tap="changeGoodSelected(item)"></text>
                <navigator :url="`/pages/goods/goods?id=${item.id}`" hover-class="none" class="navigator">
                  <image mode="aspectFill" class="picture" :src="item.picture"></image>
                  <view class="meta">
                    <view class="name ellipsis">{{item.name}}</view>
                    <view class="attrsText ellipsis">{{item.attrsText}}</view>
                    <view class="price">{{item.nowPrice}}</view>
                  </view>
                </navigator>
                <!-- 商品数量 -->
                <view class="count">
                  <text class="text" @tap="number_minus_btn(item)">-</text>
                  <input class="input" type="number" v-model="item.count" @blur="number_input_blur($event,item)"/>
                  <text class="text" @tap="number_add_btn(item)">+</text>
                </view>
              </view>
              <!-- 右侧删除按钮 -->
              <template #right>
                <view class="cart-swipe-right">
                  <button class="button delete-button" @tap="del_cartGood_btn(item.skuId)">删除</button>
                </view>
              </template>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
        <!-- 购物车空状态 -->
        <view class="cart-blank" v-else>
          <image src="/static/images/blank_cart.png" class="image" />
          <text class="text">购物车还是空的，快来挑选好货吧</text>
          <navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
            <button class="button">去首页看看</button>
          </navigator>
        </view>
        <!-- 吸底工具栏 -->
        <view class="toolbar">
          <text class="all" :class="{ checked: isAllSelected }" @tap="all_selected_btn">全选</text>
          <text class="text">合计:</text>
          <text class="amount">{{totalPrice}}</text>
          <view class="button-grounp">
            <view class="button payment-button" :class="selectedNum>0?'':'disabled'" @tap="accounts_btn"> 去结算({{selectedNum}}) </view>
          </view>
        </view>
      </template>
      <!-- 未登录: 提示登录 -->
      <view class="login-blank" v-else>
        <text class="text">登录后可查看购物车中的商品</text>
        <navigator url="/pages/login/login" hover-class="none">
          <button class="button">去登录</button>
        </navigator>
      </view>
      <!-- 猜你喜欢 -->
      <XtxGuess ref="GuessRef"></XtxGuess>
      <!-- 底部占位空盒子 -->
      <view class="toolbar-height"></view>
    </scroll-view>
</template>
  
<script setup lang="ts">
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
//引入仓库数据
import { useMemberStore } from "@/stores/index.ts";
const memberStore = useMemberStore();
//引入请求函数
import { reqCartList, reqDeleteCartList, reqUpdateCart, reqCartAllSelectedOrNoSelected } from "@/services/cart";
//@ts-ignore,引入类型约束
import type { addCartResponse } from "@/types/cart.d.ts";

//uni-生命周期
onShow(()=>{
    //获取购物车列表数据
    getCartList();
})

//XtxGuess组件实例
const GuessRef = ref();
//购物车列表数据
const cartList = ref([]);

//计算属性:对总价进行计算
const totalPrice = computed(()=>{
  let total:number = 0;
  //计算总价
  cartList.value.forEach(item=>{
      if(item.selected){
          total += Number(item.nowPrice) * Number(item.count);
      }
  })
    return total.toFixed(2);
})
//计算属性:当前是否全选状态
const isAllSelected = computed(()=>{
  return cartList.value.every(item => {
      return item.selected == true;
  })
})
//计算属性:计算选中的商品数量
const selectedNum = computed(()=>{
  let num:number = 0;
  cartList.value.forEach(item => {
      if(item.selected){
          num ++ ;
      }
    })
  return num;
})

//获取购物车列表数据
const getCartList = async () => {
    //判断用户是否登录，没登陆直接结束该函数
    if(!memberStore.profile?.token) return;
    let res = await reqCartList();
    cartList.value = res.result;
    console.log('购物车列表api',res);
}

//滑动删除购物车列表单项数据
const del_cartGood_btn = async (skuId:string) => {
    let res = await reqDeleteCartList([skuId]);
    console.log('购物车商品删除api',res);
    //进行提示
    uni.showToast({icon:'none',title:"删除成功!"});
    //更新购物车列表
    getCartList();
}
//商品数量增减按钮
const number_minus_btn = async (good:addCartResponse) => {
    if(good.count <= 1) return;
    good.count -- ;
    //发请求
    let res = await reqUpdateCart(good.skuId,good.selected,good.count);
    console.log('更新购物车商品选中状态或数量api',res);
}
const number_add_btn = async (good:any) => {
    if(good.count > 100) return;  //超过100，恶意下单数量，不合法
    good.count ++ ;
    //发请求
    let res = await reqUpdateCart(good.skuId,good.selected,good.count);
    console.log('更新购物车商品选中状态或数量api',res);
}
const number_input_blur = async (evn:any,good:any) => {
    if(evn.detail.value > 100){
        good.count = 1;
    }
    //发请求
    let res = await reqUpdateCart(good.skuId,good.selected,good.count);
    console.log('更新购物车商品选中状态或数量api',res);
}
//单个商品切换选中状态按钮
const changeGoodSelected = async (good:any) => {
  good.selected = !good.selected;
  let res = await reqUpdateCart(good.skuId,good.selected,good.count);
  console.log('更新购物车商品选中状态或数量api',res);
}
//全选全不选
const all_selected_btn = async () => {
  if(isAllSelected.value){
    //全选状态
    cartList.value.forEach(element => {
        element.selected = false;
    });
  } else {
    cartList.value.forEach(element => {
        element.selected = true;
    });
  }
  //发请求
  let res = await reqCartAllSelectedOrNoSelected(isAllSelected.value);
  console.log('购物车全选全不选api',res);
}
//去结算按钮
const accounts_btn = () => {
  //跳转到结算页
  uni.navigateTo({url:"/orderPages/createOrder/createOrder"});
}


//滚动条到底部触发事件
const onScrolltolower = () => {
    //调用猜你喜欢组件暴露的方法-->加载更多数据
    GuessRef.value.getGuessLikeList();
}


</script>
  
<style lang="scss">
  // 根元素
  :host {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f7f7f8;
  }
  
  // 滚动容器
  .scroll-view {
    flex: 1;
  }
  
  // 购物车列表
  .cart-list {
    padding: 0 20rpx;
  
    // 优惠提示
    .tips {
      display: flex;
      align-items: center;
      line-height: 1;
      margin: 30rpx 10rpx;
      font-size: 26rpx;
      color: #666;
  
      .label {
        color: #fff;
        padding: 7rpx 15rpx 5rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
        background-color: #27ba9b;
        margin-right: 10rpx;
      }
    }
  
    // 购物车商品
    .goods {
      display: flex;
      padding: 20rpx 20rpx 20rpx 80rpx;
      border-radius: 10rpx;
      background-color: #fff;
      position: relative;
  
      .navigator {
        display: flex;
      }
  
      .checkbox {
        position: absolute;
        top: 0;
        left: 0;
  
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 100%;
  
        &::before {
          content: '\e6cd';
          font-family: 'erabbit' !important;
          font-size: 40rpx;
          color: #444;
        }
  
        &.checked::before {
          content: '\e6cc';
          color: #27ba9b;
        }
      }
  
      .picture {
        width: 170rpx;
        height: 170rpx;
      }
  
      .meta {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
      }
  
      .name {
        height: 72rpx;
        font-size: 26rpx;
        color: #444;
      }
  
      .attrsText {
        line-height: 1.8;
        padding: 0 15rpx;
        font-size: 24rpx;
        align-self: flex-start;
        border-radius: 4rpx;
        color: #888;
        background-color: #f7f7f8;
      }
  
      .price {
        line-height: 1;
        font-size: 26rpx;
        color: #444;
        margin-bottom: 2rpx;
        color: #cf4444;
  
        &::before {
          content: '￥';
          font-size: 80%;
        }
      }
  
      // 商品数量
      .count {
        position: absolute;
        bottom: 20rpx;
        right: 5rpx;
  
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 220rpx;
        height: 48rpx;
  
        .text {
          height: 100%;
          padding: 0 20rpx;
          font-size: 32rpx;
          color: #444;
        }
  
        .input {
          height: 100%;
          text-align: center;
          border-radius: 4rpx;
          font-size: 24rpx;
          color: #444;
          background-color: #f6f6f6;
        }
      }
    }
  
    .cart-swipe {
      display: block;
      margin: 20rpx 0;
    }
  
    .cart-swipe-right {
      display: flex;
      height: 100%;
  
      .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        padding: 6px;
        line-height: 1.5;
        color: #fff;
        font-size: 26rpx;
        border-radius: 0;
      }
  
      .delete-button {
        background-color: #cf4444;
      }
    }
  }
  
  // 空状态
  .cart-blank,
  .login-blank {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 60vh;
    .image {
      width: 400rpx;
      height: 281rpx;
    }
    .text {
      color: #444;
      font-size: 26rpx;
      margin: 20rpx 0;
    }
    .button {
      width: 240rpx !important;
      height: 60rpx;
      line-height: 60rpx;
      margin-top: 20rpx;
      font-size: 26rpx;
      border-radius: 60rpx;
      color: #fff;
      background-color: #27ba9b;
    }
  }
  
  // 吸底工具栏
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--window-bottom);
    z-index: 1;
  
    height: 100rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #ededed;
    border-bottom: 1rpx solid #ededed;
    background-color: #fff;
    box-sizing: content-box;
  
    .all {
      margin-left: 25rpx;
      font-size: 14px;
      color: #444;
      display: flex;
      align-items: center;
    }
  
    .all::before {
      font-family: 'erabbit' !important;
      content: '\e6cd';
      font-size: 40rpx;
      margin-right: 8rpx;
    }
  
    .checked::before {
      content: '\e6cc';
      color: #27ba9b;
    }
  
    .text {
      margin-right: 8rpx;
      margin-left: 32rpx;
      color: #444;
      font-size: 14px;
    }
  
    .amount {
      font-size: 20px;
      color: #cf4444;
  
      .decimal {
        font-size: 12px;
      }
  
      &::before {
        content: '￥';
        font-size: 12px;
      }
    }
  
    .button-grounp {
      margin-left: auto;
      display: flex;
      justify-content: space-between;
      text-align: center;
      line-height: 72rpx;
      font-size: 13px;
      color: #fff;
  
      .button {
        width: 240rpx;
        margin: 0 10rpx;
        border-radius: 72rpx;
      }
  
      .payment-button {
        background-color: #27ba9b;
  
        &.disabled {
          opacity: 0.6;
        }
      }
    }
  }
  // 底部占位空盒子
  .toolbar-height {
    height: 100rpx;
  }
</style>
  